﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Datagrid - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.views.transposed.js"></script>
    <script>
    $(function () {

        var virData = [
            { ID: 1, CarBrand: "大众", SaleTotal: 111, SaleAmount: 1234.56 },
            { ID: 2, CarBrand: "马自达", SaleTotal: 222, SaleAmount: 4561.1 },
            { ID: 3, CarBrand: "宝马", SaleTotal: 333, SaleAmount: 362.4 },
            { ID: 4, CarBrand: "奔驰", SaleTotal: 444, SaleAmount: 1111.43 },
            { ID: 5, CarBrand: "讴歌", SaleTotal: 555, SaleAmount: 9811.32 },
            { ID: 6, CarBrand: "菲亚特", SaleTotal: 666, SaleAmount: 3156.77 }
        ];

        var options1 = {
            title: "关闭行列转置的数据列表（无扩展的正常效果）",
            idField: "ID",
            rownumbers: false,
            fit: true,
            border: false,
            singleSelect: true,
            frozenColumns: [[
                { field: 'ID', title: '数据编号' },
                { field: 'Test', title: '测试冻结列' },
            ]],
            columns: [[
					{ field: 'CarBrand', title: '汽车品牌' },
					{ field: 'SaleTotal', title: '销售数量' },
                    { field: 'SaleAmount', title: '销售金额' }
            ]],
            data: virData,
            rowColumnReverse: { enable: false }
        };

        $("#dg1").datagrid(options1);

        var options2 = $.extend({}, options1, {
            title: "开启行列转置的数据列表",
            rowColumnReverse: { enable: true }
        });
        $("#dg2").datagrid(options2);
    });
    </script>
</head>
<body>
    <div id="layout" class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',border:false,split:true" style="width:350px;border-right-width:1px;">
            <table id="dg1"></table>
        </div>
        <div data-options="region:'center',border:false" style="padding:15px;border-left-width:1px;border-right-width:1px;">
            冷<br />
            漠<br />
            的<br />
            分<br />
            割<br />
            线
        </div>
        <div data-options="region:'east',border:false,split:true" style="width:800px;border-left-width:1px;">
            <table id="dg2"></table>
        </div>
    </div>
</body>
</html>
